<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>数据表格</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" th:href="@{/component/pear/css/pear.css}" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">书名</label>
						<div class="layui-input-inline">
							<input type="text" name="novelName" placeholder="" class="layui-input">
						</div>
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="novel-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="novel-table" lay-filter="novel-table"></table>
			</div>
		</div>

<!--		<script type="text/html" id="novel-toolbar">-->
<!--			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">-->
<!--				<i class="layui-icon layui-icon-add-1"></i>-->
<!--				新增-->
<!--			</button>-->
<!--		</script>-->

<!--		<script type="text/html" id="novel-bar">-->
<!--			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i-->
<!--					class="layui-icon layui-icon-delete"></i></button>-->
<!--		</script>-->

		<script type="text/html" id="novel-image">
			<img src="{{d.image}}">
		</script>



		<script src="../../component/layui/layui.js" th:src="@{/component/layui/layui.js}"></script>
		<script src="../../component/pear/pear.js" th:src="@{/component/pear/pear.js}"></script>
		<script>
			layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let drawer = layui.drawer;
				let MODULE_PATH = "/book/";
				let cols = [
					[
						{
							title: '小说名称',
							field: 'name',
							align: 'center',
						},
						{
							title: '小说作者',
							field: 'author',
							align: 'center'
						},
						{
							title: '封面',
							field: 'image',
							align: 'center',
							templet: '#novel-image'
						},
						{
							title: '字数(万字)',
							field: 'wordNum',
							align: 'center',
						},
						{
							title: '小说状态',
							field: 'updateStatus',
							align: 'center'
						},
						{
							title: '小说类型',
							field: 'novelType',
							align: 'center',
						},
						// {
						// 	title: '推荐类型',
						// 	field: 'setType',
						// 	align: 'center',
						// },
						// {
						// 	title: '操作',
						// 	toolbar: '#novel-bar',
						// 	align: 'center',
						// 	width: 160,
						// 	fixed: 'right'
						// }
					]
				]

				table.render({
					elem: '#novel-table',
					url: '/book/queryByName',
					method: 'post',
					contentType: 'application/json',
					request: {
						pageName: 'pageNo' //页码的参数名称，默认：page
						,limitName: 'pageSize' //每页数据量的参数名，默认：limit
					},
					parseData: function(res){ //res 即为原始返回的数据
						return {
							"code": res.success, //解析接口状态
							"msg": res.msg, //解析提示文本
							"count": res.data.total, //解析数据长度
							"data": res.data.data //解析数据列表
						}
					},
					response: {
						statusCode: true //规定成功的状态码，默认：0
					},
					page: true,
					cols: cols,
					skin: 'line',
					// toolbar: '#novel-toolbar',
					defaultToolbar: []
				});

				form.on('submit(novel-query)', function(data) {
					table.reload('novel-table', {
						where: data.field
					})
					return false;
				});
			})
		</script>
	</body>
</html>
